<template>
  <div class="rich-text">
    <p><strong style="font-size: 44px">检 验 报 告</strong></p>
    <p><strong style="font-size: 30px;font-weight: normal">Testing Report</strong></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="padding-left: 13vw;display: flex;align-items: center;line-height: 30px;font-size: 28px;margin-bottom: 20px;">
      样品名称：
      <div style="min-width: 15vw;border-bottom: 1px solid gray;height: 30px;white-space: nowrap">{{ formHtml.page1.样品名称.value }}</div>
    </div>
    <div style="padding-left: 13vw;display: flex;align-items: center;line-height: 30px;font-size: 28px;margin-bottom: 20px;">
      规格型号：
      <div style="min-width: 15vw;border-bottom: 1px solid gray;height: 30px;white-space: nowrap">{{ formHtml.page1.规格型号.value }}</div>
    </div>
    <div style="padding-left: 13vw;display: flex;align-items: center;line-height: 30px;font-size: 28px;margin-bottom: 20px;">
      委托单位：
      <div style="min-width: 15vw;border-bottom: 1px solid gray;height: 30px;white-space: nowrap">{{ formHtml.page1.委托单位.value }}</div>
    </div>
    <div style="padding-left: 13vw;display: flex;align-items: center;line-height: 30px;font-size: 28px;margin-bottom: 20px;">
      报告日期：
      <div style="min-width: 15vw;border-bottom: 1px solid gray;height: 30px;white-space: nowrap">{{ formHtml.page1.报告日期.value }}</div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p><strong style="font-size: 22px;font-weight: normal">单位名称：{{ formHtml.page1.单位名称.value }}</strong></p>
    <br>

    <div style="display: flex;justify-content: center">
      <el-button :icon="Edit" type="primary" @click="showDialog('page1')">编辑</el-button>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <p><strong style="font-size: 30px;font-weight: normal">注 意 事 项</strong></p>
    <br>
    <p>1、报告无我单位“检验专用章”或检验单位公章无效.</p>
    <p>2、复制报告未重新加盖我单位“检验专用章”或检验单位公章无效.</p>
    <p>3、报告无主检、审核、批准人签字（章）无效、报告涂改无效.</p>
    <p>4、对检测报告若有异议，应于收到报告十五日内向检验单位提出，逾期不予处理.</p>
    <p>5、委托检验仅对被检样品负责.</p>
    <p>6、需要退还的样品及其包装物可在收到报告十五日内领取.逾期不领者，视弃样处理.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>单位名称：{{ formHtml.page2.单位名称.value }}</p>
    <p>通信地址： {{ formHtml.page2.通信地址.value }}</p>
    <p>邮政编码：{{ formHtml.page2.邮政编码.value }}</p>
    <p>电话/传真：{{ formHtml.page2['电话/传真'].value }}</p>
    <p>邮箱： {{ formHtml.page2.邮箱.value }}</p>
    <br>
    <div style="display: flex;justify-content: center">
      <el-button :icon="Edit" type="primary" @click="showDialog('page2')">编辑</el-button>
    </div>
    <br>
    <br>
    <br>
    <br>
    <p><strong style="font-size: 30px;font-weight: normal">XXXXXXXXXXXX公司</strong></p>
    <p><strong style="font-size: 30px;font-weight: normal">检 验 报 告</strong></p>
    <div style="text-align: right">GSMC/JL CX-2019-33-01 B/1</div>
    <br>
    <div style="text-align: right"> 共 1 页 第 1 页</div>
    <br>
    <table>
      <tbody>
      <tr>
        <td>
          <p>样品名称</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.样品名称.value') }">{{ formHtml.page3.样品名称.value }}</td>
        <td colspan="2">
          <p>规格型号</p>
        </td>
        <td :style="{ color: fnColor('page3.规格型号.value') }">{{ formHtml.page3.规格型号.value }}</td>
      </tr>
      <tr>
        <td>
          <p>生产单位</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.生产单位.value') }">{{ formHtml.page3.生产单位.value }}</td>
        <td colspan="2">
          <p>商 标</p>
        </td>
        <td :style="{ color: fnColor('page3.商 标.value') }">{{ formHtml.page3['商 标'].value }}</td>
      </tr>
      <tr>
        <td>
          <p>委托单位</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.委托单位.value') }">{{ formHtml.page3.委托单位.value }}</td>
        <td colspan="2">
          <p>样品批次</p>
        </td>
        <td :style="{ color: fnColor('page3.样品批次.value') }">{{ formHtml.page3.样品批次.value }}</td>
      </tr>
      <tr>
        <td>
          <p>样品数量</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.样品数量.value') }">{{ formHtml.page3.样品数量.value }}</td>
        <td colspan="2">
          <p>样品状态</p>
        </td>
        <td :style="{ color: fnColor('page3.样品状态.value') }">{{ formHtml.page3.样品状态.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验类别</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验类别.value') }">{{ formHtml.page3.检验类别.value }}</td>
        <td colspan="2">
          <p>送样人</p>
        </td>
        <td :style="{ color: fnColor('page3.送样人.value') }">{{ formHtml.page3.送样人.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验依据</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验依据.value') }">{{ formHtml.page3.检验依据.value }}</td>
        <td colspan="2">
          <p>到样日期</p>
        </td>
        <td :style="{ color: fnColor('page3.到样日期.value') }">{{ formHtml.page3.到样日期.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验项目</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验项目.value') }">{{ formHtml.page3.检验项目.value }}</td>
        <td colspan="2">
          <p>检测日期</p>
        </td>
        <td :style="{ color: fnColor('page3.检测日期.value') }">{{ formHtml.page3.检测日期.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验结论</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.检验结论.value') }">{{ formHtml.page3.检验结论.value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>检验环境</p>
        </td>
        <td colspan="5">
          <p><span>温度：</span><span :style="{ color: fnColor('page3.温度.value') }">{{ formHtml.page3.温度.value }}</span>　　　　 　　<span>湿度：</span><span :style="{ color: fnColor('page3.湿度.value') }">{{ formHtml.page3.湿度.value }}</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p>批 准</p>
        </td>
        <td>
          <p :style="{ color: fnColor('page3.批 准.value') }">{{ formHtml.page3['批 准'].value }}</p>
        </td>
        <td>
          <p>审核</p>
        </td>
        <td colspan="3">
          <p :style="{ color: fnColor('page3.审核.value') }">{{ formHtml.page3.审核.value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>主 检</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.主 检.value') }">{{ formHtml.page3['主 检'].value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>备 注</p>
        </td>
        <td colspan="5" :style="{ color: fnColor('page3.备 注.value') }">{{ formHtml.page3['备 注'].value }}</td>
      </tr>
      <tr>
        <td>
          <p>录入</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.录入.value') }">{{ formHtml.page3.录入.value }}</p>
        </td>
      </tr>
      </tbody>
    </table>
    <br>
    <div style="display: flex;justify-content: center">
      <el-button :icon="Edit" type="primary" @click="showDialog('page3')">编辑</el-button>
    </div>
    <br>
    <br>
    <br>
    <br>
    <p><strong style="font-size: 30px;font-weight: normal">检 验 报 告（续页）</strong></p>
    <div style="text-align: right">GSMC/JL CX-2019-33-01 B/1</div>
    <br>
    <div style="text-align: right"> 共 1 页 第 1 页</div>
    <br>
    <table>
      <tbody>
      <tr>
        <td>
          <p>序号</p>
        </td>
        <td>
          <p>检测项目</p>
        </td>
        <td>
          <p>单位</p>
        </td>
        <td>
          <p>标准规定</p>
        </td>
        <td>
          <p>检验结果</p>
        </td>
        <td>
          <p>单项判定</p>
        </td>
      </tr>
      <tr v-for="(item, index) in formHtml.page4.检验列表">
        <td><span>{{ item.lab1 }}</span></td>
        <td>{{ item.lab2 }}</td>
        <td>{{ item.lab3 }}</td>
        <td>{{ item.lab4 }}</td>
        <td :style="{color: fnPage4(index, 'lab5')}">{{ item.lab5 }}</td>
        <td :style="{color: fnPage4(index, 'lab5')}">{{ fnPage4(index, 'lab5') === 'red'? '不合格': '合格' }}</td>
      </tr>
      </tbody>
    </table>
    <br>
    <div style="display: flex;justify-content: center">
      <el-button :icon="Edit" type="primary" @click="showDialog('page4')">编辑</el-button>
    </div>
  </div>

  <div class="rich-text" id="content" style="position: fixed;left: 200vw">
    <div style="font-size: 100px;text-align: center">检 验 报 告</div>
    <div style="text-align: center;font-size: 30px;font-weight: normal">Testing Report</div>
    <br>
    <br>
    <br>
    <div style="margin-left: 20mm;font-size: 44px;font-weight: bold">样品名称：{{ formHtml.page1.样品名称.value }}</div>
    <br>
    <div style="margin-left: 20mm;font-size: 44px;font-weight: bold">规格型号：{{ formHtml.page1.规格型号.value }}</div>
    <br>
    <div style="margin-left: 20mm;font-size: 44px;font-weight: bold">委托单位：{{ formHtml.page1.委托单位.value }}</div>
    <br>
    <div style="margin-left: 20mm;font-size: 44px;font-weight: bold">报告日期：{{ formHtml.page1.报告日期.value }}</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <div style="text-align: center;font-size: 30px;font-weight: normal">单位名称：{{ formHtml.page1.单位名称.value }}</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <div style="text-align: center;font-size: 44px;font-weight: normal">注 意 事 项</div>
    <div>1、报告无我单位“检验专用章”或检验单位公章无效.</div>
    <div>2、复制报告未重新加盖我单位“检验专用章”或检验单位公章无效.</div>
    <div>3、报告无主检、审核、批准人签字（章）无效、报告涂改无效.</div>
    <div>4、对检测报告若有异议，应于收到报告十五日内向检验单位提出，逾期不予处理.</div>
    <div>5、委托检验仅对被检样品负责.</div>
    <div>6、需要退还的样品及其包装物可在收到报告十五日内领取.逾期不领者，视弃样处理.</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div>单位名称：{{ formHtml.page2.单位名称.value }}</div>
    <div>通信地址： {{ formHtml.page2.通信地址.value }}</div>
    <div>邮政编码：{{ formHtml.page2.邮政编码.value }}</div>
    <div>电话/传真：{{ formHtml.page2['电话/传真'].value }}</div>
    <div>邮箱： {{ formHtml.page2.邮箱.value }}</div>
    <br>
    <br>

    <div style="text-align: center;font-size: 44px;font-weight: normal">XXXXXXXXXXXX公司</div>
    <div style="text-align: center;font-size: 44px;font-weight: normal">检 验 报 告</div>
    <div style="text-align: right">GSMC/JL CX-2019-33-01 B/1</div>
    <div style="text-align: right">共 1 页 第 1 页</div>


    <table>
      <tbody>
      <tr>
        <td style="width: 16mm">
          <p>样品名称</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.样品名称.value') }">{{ formHtml.page3.样品名称.value }}</td>
        <td colspan="2" style="width: 16mm">
          <p>规格型号</p>
        </td>
        <td :style="{ color: fnColor('page3.规格型号.value') }">{{ formHtml.page3.规格型号.value }}</td>
      </tr>
      <tr>
        <td>
          <p>生产单位</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.生产单位.value') }">{{ formHtml.page3.生产单位.value }}</td>
        <td colspan="2">
          <p>商 标</p>
        </td>
        <td :style="{ color: fnColor('page3.商 标.value') }">{{ formHtml.page3['商 标'].value }}</td>
      </tr>
      <tr>
        <td>
          <p>委托单位</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.委托单位.value') }">{{ formHtml.page3.委托单位.value }}</td>
        <td colspan="2">
          <p>样品批次</p>
        </td>
        <td :style="{ color: fnColor('page3.样品批次.value') }">{{ formHtml.page3.样品批次.value }}</td>
      </tr>
      <tr>
        <td>
          <p>样品数量</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.样品数量.value') }">{{ formHtml.page3.样品数量.value }}</td>
        <td colspan="2">
          <p>样品状态</p>
        </td>
        <td :style="{ color: fnColor('page3.样品状态.value') }">{{ formHtml.page3.样品状态.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验类别</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验类别.value') }">{{ formHtml.page3.检验类别.value }}</td>
        <td colspan="2">
          <p>送样人</p>
        </td>
        <td :style="{ color: fnColor('page3.送样人.value') }">{{ formHtml.page3.送样人.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验依据</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验依据.value') }">{{ formHtml.page3.检验依据.value }}</td>
        <td colspan="2">
          <p>到样日期</p>
        </td>
        <td :style="{ color: fnColor('page3.到样日期.value') }">{{ formHtml.page3.到样日期.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验项目</p>
        </td>
        <td colspan="2" :style="{ color: fnColor('page3.检验项目.value') }">{{ formHtml.page3.检验项目.value }}</td>
        <td colspan="2">
          <p>检测日期</p>
        </td>
        <td :style="{ color: fnColor('page3.检测日期.value') }">{{ formHtml.page3.检测日期.value }}</td>
      </tr>
      <tr>
        <td>
          <p>检验结论</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.检验结论.value') }">{{ formHtml.page3.检验结论.value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>检验环境</p>
        </td>
        <td colspan="5">
          <p><span>温度：</span><span :style="{ color: fnColor('page3.温度.value') }">{{ formHtml.page3.温度.value }}</span>　　　　 　　<span>湿度：</span><span :style="{ color: fnColor('page3.湿度.value') }">{{ formHtml.page3.湿度.value }}</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p>批 准</p>
        </td>
        <td>
          <p :style="{ color: fnColor('page3.批 准.value') }">{{ formHtml.page3['批 准'].value }}</p>
        </td>
        <td>
          <p>审核</p>
        </td>
        <td colspan="3">
          <p :style="{ color: fnColor('page3.审核.value') }">{{ formHtml.page3.审核.value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>主 检</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.主 检.value') }">{{ formHtml.page3['主 检'].value }}</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>备 注</p>
        </td>
        <td colspan="5" :style="{ color: fnColor('page3.备 注.value') }">{{ formHtml.page3['备 注'].value }}</td>
      </tr>
      <tr>
        <td>
          <p>录入</p>
        </td>
        <td colspan="5">
          <p :style="{ color: fnColor('page3.录入.value') }">{{ formHtml.page3.录入.value }}</p>
        </td>
      </tr>
      </tbody>
    </table>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="text-align: center;font-size: 44px;font-weight: normal">检 验 报 告（续页）</div>
    <div style="text-align: right">GSMC/JL CX-2019-33-01 B/1 </div>
    <div style="text-align: right">共 1 页 第 1 页</div>
    <table>
      <tbody>
      <tr>
        <td>
          <p>序号</p>
        </td>
        <td>
          <p>检测项目</p>
        </td>
        <td>
          <p>单位</p>
        </td>
        <td>
          <p>标准规定</p>
        </td>
        <td>
          <p>检验结果</p>
        </td>
        <td>
          <p>单项判定</p>
        </td>
      </tr>
      <tr v-for="(item, index) in formHtml.page4.检验列表">
        <td><span>{{ item.lab1 }}</span></td>
        <td>{{ item.lab2 }}</td>
        <td>{{ item.lab3 }}</td>
        <td>{{ item.lab4 }}</td>
        <td :style="{color: fnPage4(index, 'lab5')}">{{ item.lab5 }}</td>
        <td :style="{color: fnPage4(index, 'lab5')}">{{ fnPage4(index, 'lab5') === 'red'? '不合格': '合格' }}</td>
      </tr>
      </tbody>
    </table>
  </div>


  <el-dialog v-model="dialogFormVisible1" :title="title" width="800" @close="closeDialog">
    <el-form :model="form" label-width="auto" style="max-width: 800px">
      <div class="form-scroll">
        <el-row :gutter="20">
          <template v-for="(item, index) in Object.keys(form)">
            <template v-if="item !== '检验列表'">
              <el-col :span="12">
                <el-form-item :label="item">
                  <template v-if="form[item].type === 'datetime'">
                    <el-date-picker
                      v-model="form[item].value"
                      type="date"
                      :placeholder="`请选择${item}`"
                      value-format="YYYY-MM-DD"
                    />
                  </template>
                  <template v-else>
                    <el-input v-model="form[item].value" :placeholder="`请填写${item}`" />
                  </template>
                </el-form-item>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="24">
                <el-table :data="form[item]" border style="margin-bottom: 20px">
                  <el-table-column prop="lab1" label="序号" />
                  <el-table-column prop="lab2" label="检验项目" >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lab2"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lab3" label="单位" >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lab3"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lab4" label="标准规定" >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lab4"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lab5" label="检验结果" >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lab5"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </template>
          </template>
        </el-row>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="dialogFormVisible1 = false">取消</el-button>
    </div>
  </el-dialog>

</template>

<script setup>
// 方法
import { ref, defineEmits } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import methods from '@/utils/methods.js';
// 表单填写
const dialogFormVisible1 = ref(false)

const emit = defineEmits(['change'])

const formHtml = ref({
  page1: {
    // 基础信息
    '样品名称': { type: '', value: '工业废水-20250708' },
    '规格型号': { type: '', value: '常规检测样本' },
    '委托单位': { type: '', value: 'XX市环境监测中心站' },
    '报告日期': { type: 'datetime', value: '2025-07-08 14:30:00' },
    '单位名称': { type: '', value: 'XX第三方检测有限公司' },
  },
  page2: {
    // 检测报告
    '单位名称': { type: '', value: 'XX第三方检测有限公司' },
    '通信地址': { type: '', value: 'XX市科技园区检测大道88号' },
    '邮政编码': { type: '', value: '100088' },
    '电话/传真': { type: '', value: '010-88887777 / 010-88887778' },
    '邮箱': { type: '', value: 'test@example.com' },
  },
  page3: {
    // 检验结果
    '样品名称': { type: '', value: '工业废水-20250708' },
    '规格型号': { type: '', value: '常规检测样本' },
    '生产单位': { type: '', value: 'XX化工有限公司' },
    '商 标': { type: '', value: '无' },
    '委托单位': { type: '', value: 'XX市环境监测中心站' },
    '样品批次': { type: '', value: '20250701-08' },
    '样品数量': { type: '', value: '500mL×2瓶' },
    '样品状态': { type: '', value: '液态，澄清无异味' },
    '检验类别': { type: '', value: '监督性监测' },
    '送样人': { type: '', value: '张明（工号：E007）' },
    '检验依据': { type: '', value: '《地表水和污水监测技术规范》HJ/T91.1-2019' },
    '到样日期': { type: 'datetime', value: '2025-07-05' },
    '检验项目': { type: '', value: '化学需氧量、生化需氧量、氨氮等7项' },
    '检测日期': { type: 'datetime', value: '2025-07-06' },
    '检验结论': { type: '', value: '所检项目中pH、电导率等符合《污水综合排放标准》GB8978-1996三级标准' },
    '温度': { type: '', value: '25.5℃' },
    '湿度': { type: '', value: '55%RH' },
    '批 准': { type: 'datetime', value: '2025-07-06' },
    '审核': { type: 'datetime', value: '2025-07-06' },
    '主 检': { type: '', value: '陈璐（签字）' },
    '备 注': { type: '', value: '样品采集点为工厂总排口' },
    '录入': { type: '', value: '系统自动录入（2025-07-08 15:00）' },
  },
  page4: {
    '检验列表': [
      {lab1: '01', lab2: 'pH 值 ', lab3: ' 无 ', lab4: '6.5-8.5', lab5: '7.3', lab6: '合格'},
      { lab1: '02', lab2: ' 浑浊度 ', lab3: 'NTU', lab4: '≤1', lab5: '0.5', lab6: '合格' },
      { lab1: '03', lab2: ' 色度 ', lab3: ' 度 ', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '04', lab2: ' 铁 ', lab3: 'mg/L', lab4: '≤0.3', lab5: '0.14', lab6: '合格' },
      { lab1: '05', lab2: ' 锰 ', lab3: 'mg/L', lab4: '≤0.1', lab5: '0.05', lab6: '合格' },
      { lab1: '06', lab2: ' 氯化物 ', lab3: 'mg/L', lab4: '≤250', lab5: '180', lab6: '合格' },
      { lab1: '07', lab2: ' 硫酸盐 ', lab3: 'mg/L', lab4: '≤250', lab5: '201', lab6: '合格' },
      { lab1: '08', lab2: ' 总硬度（以 CaCO₃计）', lab3: 'mg/L', lab4: '≤451', lab5: '320', lab6: '合格' },
      { lab1: '09', lab2: ' 溶解氧 ', lab3: 'mg/L', lab4: '≥5', lab5: '6.8', lab6: '合格' },
      { lab1: '10', lab2: ' 化学需氧量（COD）', lab3: 'mg/L', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '11', lab2: ' 氨氮 ', lab3: 'mg/L', lab4: '≤0.5', lab5: '0.215', lab6: '合格' },
      { lab1: '12', lab2: ' 亚硝酸盐氮 ', lab3: 'mg/L', lab4: '≤1', lab5: '0.1', lab6: '合格' },
      { lab1: '13', lab2: ' 菌落总数 ', lab3: 'CFU/mL', lab4: '≤100', lab5: '50', lab6: '合格' },
      { lab1: '14', lab2: ' 总大肠菌群 ', lab3: 'MPN/100mL', lab4: ' 不得检出 ', lab5: ' 未检出 ', lab6: '合格' },
      { lab1: '15', lab2: ' 铅 ', lab3: 'mg/L', lab4: '≤0.01', lab5: '0.005', lab6: '合格' },
    ],
  }
})


const formHtmlYs = ref({
  page1: {
    // 基础信息
    '样品名称': { type: '', value: '' },
    '规格型号': { type: '', value: '' },
    '委托单位': { type: '', value: '' },
    '报告日期': { type: 'datetime', value: '' },
    '单位名称': { type: '', value: '' },
  },
  page2: {
    // 检测报告
    '单位名称': { type: '', value: '' },
    '通信地址': { type: '', value: '' },
    '邮政编码': { type: '', value: '' },
    '电话/传真': { type: '', value: '' },
    '邮箱': { type: '', value: '' },
    // '检验列表': [
    //   { lab1: '化学需氧量', lab2: '重铬酸盐法GB11914-1989', lab3: '12.5(mg/L)', lab4: 'XJIII型消解器(编号:1306)' },
    //   { lab1: '生化需氧量', lab2: '稀释与接种法HJ505-2009', lab3: '1.2(mg/L)', lab4: '溶解氧瓶(规格:500mL)' },
    //   { lab1: '氨氮', lab2: '纳氏试剂分光度法HJ535-2009', lab3: '0.018(mg/L)', lab4: '7230G可见分光光度计(编号:069089)' },
    //   { lab1: '固体悬浮物', lab2: '重量法GB11901-89', lab3: '8.3(mg/L)', lab4: '全玻璃微孔滤膜过滤器(孔径:0.45μm)' },
    //   { lab1: '总硬度', lab2: 'EDTA滴定法GB7477-1987', lab3: '45.6(mmg/L)', lab4: '25ml酸式滴定管(编号:T025)' },
    //   { lab1: 'pH', lab2: '玻璃电极法GB/T6920-1986', lab3: '7.25(pH值)', lab4: 'pH计(型号:H04821402)' },
    //   { lab1: '电导率', lab2: '电导率仪法GB/T13195-1991', lab3: '245(us/cm)', lab4: 'DDS-307数字电导仪(编号:D1202507)' },
    // ],
  },
  page3: {
    // 检验结果
    '样品名称': { type: '', value: '' },
    '规格型号': { type: '', value: '' },
    '生产单位': { type: '', value: '' },
    '商 标': { type: '', value: '' },
    '委托单位': { type: '', value: '' },
    '样品批次': { type: '', value: '' },
    '样品数量': { type: '', value: '' },
    '样品状态': { type: '', value: '' },
    '检验类别': { type: '', value: '' },
    '送样人': { type: '', value: '' },
    '检验依据': { type: '', value: '' },
    '到样日期': { type: '', value: '' },
    '检验项目': { type: '', value: '' },
    '检测日期': { type: '', value: '' },
    '检验结论': { type: '', value: '' },
    '温度': { type: '', value: '25.5℃' },
    '湿度': { type: '', value: '55%RH' },
    '批 准': { type: '', value: '' },
    '审核': { type: '', value: '' },
    '主 检': { type: '', value: '' },
    '备 注': { type: '', value: '' },
    '录入': { type: '', value: '' },
  },
  page4: {
    '检验列表': [
      {lab1: '01', lab2: 'pH 值 ', lab3: ' 无 ', lab4: '6.5-8.5', lab5: '7.2', lab6: '合格'},
      { lab1: '02', lab2: ' 浑浊度 ', lab3: 'NTU', lab4: '≤1', lab5: '0.5', lab6: '合格' },
      { lab1: '03', lab2: ' 色度 ', lab3: ' 度 ', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '04', lab2: ' 铁 ', lab3: 'mg/L', lab4: '≤0.3', lab5: '0.12', lab6: '合格' },
      { lab1: '05', lab2: ' 锰 ', lab3: 'mg/L', lab4: '≤0.1', lab5: '0.05', lab6: '合格' },
      { lab1: '06', lab2: ' 氯化物 ', lab3: 'mg/L', lab4: '≤250', lab5: '180', lab6: '合格' },
      { lab1: '07', lab2: ' 硫酸盐 ', lab3: 'mg/L', lab4: '≤250', lab5: '200', lab6: '合格' },
      { lab1: '08', lab2: ' 总硬度（以 CaCO₃计）', lab3: 'mg/L', lab4: '≤450', lab5: '320', lab6: '合格' },
      { lab1: '09', lab2: ' 溶解氧 ', lab3: 'mg/L', lab4: '≥5', lab5: '6.8', lab6: '合格' },
      { lab1: '10', lab2: ' 化学需氧量（COD）', lab3: 'mg/L', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '11', lab2: ' 氨氮 ', lab3: 'mg/L', lab4: '≤0.5', lab5: '0.25', lab6: '合格' },
      { lab1: '12', lab2: ' 亚硝酸盐氮 ', lab3: 'mg/L', lab4: '≤1', lab5: '0.3', lab6: '合格' },
      { lab1: '13', lab2: ' 菌落总数 ', lab3: 'CFU/mL', lab4: '≤100', lab5: '50', lab6: '合格' },
      { lab1: '14', lab2: ' 总大肠菌群 ', lab3: 'MPN/100mL', lab4: ' 不得检出 ', lab5: ' 未检出 ', lab6: '合格' },
      { lab1: '15', lab2: ' 铅 ', lab3: 'mg/L', lab4: '≤0.01', lab5: '0.005', lab6: '合格' },
    ],
  }
})

const formHtmlVerify = ref({
  page1: {
    // 基础信息
    '样品名称': { type: '', value: '' },
    '规格型号': { type: '', value: '' },
    '委托单位': { type: '', value: '' },
    '报告日期': { type: 'datetime', value: '' },
    '单位名称': { type: '', value: '' },
  },
  page2: {
    // 检测报告
    '单位名称': { type: '', value: '' },
    '通信地址': { type: '', value: '' },
    '邮政编码': { type: '', value: '' },
    '电话/传真': { type: '', value: '' },
    '邮箱': { type: '', value: '' },
    // '检验列表': [
    //   { lab1: '化学需氧量', lab2: '重铬酸盐法GB11914-1989', lab3: '12.5(mg/L)', lab4: 'XJIII型消解器(编号:1306)' },
    //   { lab1: '生化需氧量', lab2: '稀释与接种法HJ505-2009', lab3: '1.2(mg/L)', lab4: '溶解氧瓶(规格:500mL)' },
    //   { lab1: '氨氮', lab2: '纳氏试剂分光度法HJ535-2009', lab3: '0.018(mg/L)', lab4: '7230G可见分光光度计(编号:069089)' },
    //   { lab1: '固体悬浮物', lab2: '重量法GB11901-89', lab3: '8.3(mg/L)', lab4: '全玻璃微孔滤膜过滤器(孔径:0.45μm)' },
    //   { lab1: '总硬度', lab2: 'EDTA滴定法GB7477-1987', lab3: '45.6(mmg/L)', lab4: '25ml酸式滴定管(编号:T025)' },
    //   { lab1: 'pH', lab2: '玻璃电极法GB/T6920-1986', lab3: '7.25(pH值)', lab4: 'pH计(型号:H04821402)' },
    //   { lab1: '电导率', lab2: '电导率仪法GB/T13195-1991', lab3: '245(us/cm)', lab4: 'DDS-307数字电导仪(编号:D1202507)' },
    // ],
  },
  page3: {
    // 检验结果
    '样品名称': { type: '', value: '' },
    '规格型号': { type: '', value: '' },
    '生产单位': { type: '', value: '' },
    '商 标': { type: '', value: '' },
    '委托单位': { type: '', value: '' },
    '样品批次': { type: '', value: '' },
    '样品数量': { type: '', value: '' },
    '样品状态': { type: '', value: '' },
    '检验类别': { type: '', value: '' },
    '送样人': { type: '', value: '' },
    '检验依据': { type: '', value: '' },
    '到样日期': { type: '', value: '' },
    '检验项目': { type: '', value: '' },
    '检测日期': { type: '', value: '' },
    '检验结论': { type: '', value: '' },
    '温度': { type: '', value: '25.5℃' },
    '湿度': { type: '', value: '55%RH' },
    '批 准': { type: '', value: '' },
    '审核': { type: '', value: '' },
    '主 检': { type: '', value: '' },
    '备 注': { type: '', value: '' },
    '录入': { type: '', value: '' },
  },
  page4: {
    '检验列表': [
      {lab1: '01', lab2: 'pH 值 ', lab3: ' 无 ', lab4: '6.5-8.5', lab5: '7.2', lab6: '合格'},
      { lab1: '02', lab2: ' 浑浊度 ', lab3: 'NTU', lab4: '≤1', lab5: '0.5', lab6: '合格' },
      { lab1: '03', lab2: ' 色度 ', lab3: ' 度 ', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '04', lab2: ' 铁 ', lab3: 'mg/L', lab4: '≤0.3', lab5: '0.12', lab6: '合格' },
      { lab1: '05', lab2: ' 锰 ', lab3: 'mg/L', lab4: '≤0.1', lab5: '0.05', lab6: '合格' },
      { lab1: '06', lab2: ' 氯化物 ', lab3: 'mg/L', lab4: '≤250', lab5: '180', lab6: '合格' },
      { lab1: '07', lab2: ' 硫酸盐 ', lab3: 'mg/L', lab4: '≤250', lab5: '200', lab6: '合格' },
      { lab1: '08', lab2: ' 总硬度（以 CaCO₃计）', lab3: 'mg/L', lab4: '≤450', lab5: '320', lab6: '合格' },
      { lab1: '09', lab2: ' 溶解氧 ', lab3: 'mg/L', lab4: '≥5', lab5: '6.8', lab6: '合格' },
      { lab1: '10', lab2: ' 化学需氧量（COD）', lab3: 'mg/L', lab4: '≤15', lab5: '8', lab6: '合格' },
      { lab1: '11', lab2: ' 氨氮 ', lab3: 'mg/L', lab4: '≤0.5', lab5: '0.25', lab6: '合格' },
      { lab1: '12', lab2: ' 亚硝酸盐氮 ', lab3: 'mg/L', lab4: '≤1', lab5: '0.3', lab6: '合格' },
      { lab1: '13', lab2: ' 菌落总数 ', lab3: 'CFU/mL', lab4: '≤100', lab5: '50', lab6: '合格' },
      { lab1: '14', lab2: ' 总大肠菌群 ', lab3: 'MPN/100mL', lab4: ' 不得检出 ', lab5: ' 未检出 ', lab6: '合格' },
      { lab1: '15', lab2: ' 铅 ', lab3: 'mg/L', lab4: '≤0.01', lab5: '0.005', lab6: '合格' },
    ],
  }
})

// 填写表单
const form = ref({})
const title = ref('')
const formKey = ref('')

const showDialog = (key) => {
  formKey.value = key
  form.value = methods.deepClone(formHtml.value[formKey.value])
  dialogFormVisible1.value = true
  const titleObj = {
    page1: '基础信息',
    page2: '注 意 事 项',
    page3: '检 验 报 告',
  }

  title.value = titleObj[formKey.value]
  emit('change', dialogFormVisible1.value)
}

// 关闭表单
const closeDialog = () => {
  dialogFormVisible1.value = false
  emit('change', dialogFormVisible1.value)
}

const onSubmit = () => {
  for(let i in form.value) {
    formHtml.value[formKey.value][i] = form.value[i]
  }
  dialogFormVisible1.value = false
}

const fnColor = (key) => {
  let keys = key.split('.')
  if(formHtmlVerify.value[keys[0]][keys[1]][keys[2]] === formHtmlYs.value[keys[0]][keys[1]][keys[2]] && formHtmlVerify.value[keys[0]][keys[1]][keys[2]]) {
    if(formHtml.value[keys[0]][keys[1]][keys[2]] === formHtmlVerify.value[keys[0]][keys[1]][keys[2]]) {
      return 'red'
    }else {
      return '#6aab73'
    }
  }else {
    return '#333'
  }
}

const fnPage4 = (index, key) => {
  if(formHtmlVerify.value.page4.检验列表[index][key] === formHtmlYs.value.page4.检验列表[index][key] && formHtmlVerify.value.page4.检验列表[index][key]) {
    if(formHtml.value.page4.检验列表[index][key] === formHtmlVerify.value.page4.检验列表[index][key]) {
      return 'red'
    }else {
      return '#6aab73'
    }
  }else {
    return '#6aab73'
  }
}

</script>

<style scoped lang="scss">
table {
  border-collapse: collapse; /* 合并相邻边框 */
  width: 100%;
}

table, th, td {
  border: 1px solid #ccc; /* 设置边框样式 */
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 表头背景色 */
}
.rich-text {
  width: 50vw;
  padding: 20px;
  background-color: #fff;
  height: auto;
  p {
    display: flex;
  }
  strong {
    margin: 0 auto;
  }
  table {
    width: 100%; /* 可选，根据需要调整表格宽度 */
    border-collapse: collapse; /* 确保边框不会重叠 */
  }

  td, th {
    border: 1px solid black; /* 给所有单元格添加边框 */
    padding: 8px; /* 可选，增加一些内边距让内容看起来更舒适 */
  }
}

.form-scroll {
  width: 740px;
  padding-right: 10px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
